<template>
  <div class="wrap" @scroll="loadMore">
    <div class="interview-list">
      <div v-for="item in interview" :key="item.id">
        <div>
          <img :src="'https://ss.lanqb.com/' + item.imgCover" alt="" />
        </div>

        <div class="interview-text" @click="to(item.id)">
          <h4>{{ item.title }}</h4>
          <span>
            <img :src="'https://ss.lanqb.com/' + item.profile.avatar" alt="" />
            <span>{{ item.profile.nickname }}</span>
          </span>
          <p class="like-num">
            <span>{{ item.flow_num_base }}</span>
            <span>{{ item.statistics.comment_num }}</span>
            <span>{{ item.statistics.favour_num }}</span>
          </p>
        </div>
      </div>
    </div>
    <div v-show="isShow" style="margin-bottom: 200px">加载中...</div>
  </div>
</template>

<script>
export default {
  name: "DachuActiveTwo",

  data() {
    return {
      interview: [],
      curPage: 1,
      isShow: true,
      infoId: null,
    };
  },

  methods: {
    to(id) {
      this.infoId = id;
      // console.log(this.infoId);
      this.$router.push(`/DachuTwoInfo/${this.infoId}`);
    },
    loadMore(e) {
      const st = e.target.scrollTop;
      const cheight = e.target.clientHeight;
      const theight = e.target.scrollHeight;
      if (st + cheight >= theight) {
        this.curPage++;
        this.isShow = true;
        fetch(
          `https://m.lanqb.com/api/daniu/interview?link=paging&type=interview&page=${this.curPage}`
        )
          .then((res) => res.json())
          .then((data) => {
            this.interview = [...this.interview, ...data.data];
            console.log(this.interview);
            this.isShow = false;
          });
      }
    },
  },
  created() {
    fetch(
      "https://m.lanqb.com/api/daniu/interview?link=paging&type=interview&page=1"
    )
      .then((res) => res.json())
      .then((data) => {
        this.interview = data.data;
        console.log(this.interview);
      });
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  padding: 0 10px;
  background-color: #eee;
  height: calc(100vh - 200px);
  overflow-y: scroll; // 开启滚动
  .interview-list {
    > div {
      display: flex;
      margin-top: 10px;
      background-color: white;
      border-radius: 0px 5px 5px 0px;
      > div > img {
        width: 165px;
        height: 116px;
        border-radius: 5px 0px 0px 5px;
      }
    }
  }
  .interview-text {
    width: 194px;
    height: 116px;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    h4 {
      font-weight: 700;
      font-size: 18px;
      height: 40px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    span {
      display: flex;
      align-items: center;
      > img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        padding-right: 10px;
      }
      > span {
        color: #434343;
      }
    }
  }
  .like-num {
    width: 160px;
    padding-right: 30px;
    display: flex;
    justify-content: space-around;
    color: #9f9f9f;
  }
}
</style>
